<template>
	<view class="" style="width: 100vw;height: 100vh">
		<view class="" :style="{'background':kbackgroundColor2}" style="min-height: 100vh">
	<view class="content">
		<hx-navbar title="提现" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden" transparent="auto">
		</hx-navbar>
		<image class="bg" src="/static/index/collect_bg.jpg" mode="scaleToFill"></image>
		<view class="content-top">
			<view class="top">
				<view class="top_left">
					提现到
				</view>
				<view class="top_right">
					<!-- <image src="/static/index/wx.png" mode="widthFix" class="wx_img"></image> -->
					<picker class="right_title" mode="selector" :range="type_list" range-key="name" :index="type_index"
						@change="type_change">
						<view>{{type_index == -1?'选择提现到':type_list[type_index].name}}</view>
					</picker>
				</view>
			</view>

			<!-- 我的银行卡信息 -->
			<!-- <view class='cell-group margin-cell-group' v-if="userbankCard" @click="toBankCardList">
				<view class='cell-item right-img cell-item-mid'>
					<view class='cell-item-hd'>
						<image class="yl-logo" :src="cardInfo.bank_logo" mode=""></image>
					</view>
					<view class='cell-item-bd'>
						<text class="cell-bd-view">{{ cardInfo.card_number || ''}}</text>
					</view>
					<view class="cell-item-ft">
						<image class='cell-ft-next icon' src='/static/image/right.png'></image>
					</view>
				</view>
			</view>
			<view class='cell-group margin-cell-group' v-else @click="toBankCardList">
				<view class='cell-item right-img cell-item-mid'>
					<view class='cell-item-hd'>
						<image class="yl-logo" src="/static/image/yl.png" mode=""></image>
					</view>
					<view class='cell-item-bd'>
						<text class="cell-bd-view">请添加银行卡</text>
					</view>
					<view class="cell-item-ft">
						<image class='cell-ft-next icon' src='/static/image/right.png'></image>
					</view>
				</view>
			</view> -->
			<!-- 提现部分 -->
			<view class="box">
				<view class="box_title">
					提现金额
				</view>
				<view class="box_input">
					<view class="box_symbol">
						￥
					</view><input type="number" v-model="money" class="box_symbol" />
				</view>
				<view class="box_footer" v-show="!isError">
					当前可提现{{ user.balance || ''}}元,
					<view class="box_red" @tap="all_num">
						全部提现
					</view>
				</view>
				<view class="box_footer" v-show="isError">
					提现金额超过可用余额
				</view>
			</view>

			<view class="note" v-if="tocashExplain !== ''">
				<view class="note_symbol">
					*
				</view>
				<view class="note_text">
					<!-- 提现需扣除10%手续费 -->
					{{ tocashExplain || ''}}
				</view>
			</view>
		</view>

		<!-- 按钮 -->
		<!-- 		<view class="btn_btn red_btn" v-if="isSubmit" @click="toCash" :disabled='submitStatus' :loading='submitStatus'>
			立即提现
		</view>
		<view class="btn_btn" v-else-if="!isSubmit" disabled>
			立即提现
		</view> -->

		<view class="bottom_box">

			<view class="submit_btn" v-if="isSubmit" @click="toCash" disabled='submitStatus' :loading='submitStatus'>
				<text>
					立即提现
				</text>
			</view>
			<view class=" submit_btn2" v-else-if="!isSubmit" disabled>
				<text>
					立即提现
				</text>
			</view>
		</view>
	</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardInfo: {}, // 我的银行卡信息
				user: {}, // 用户信息
				isError: false, // 当提现金额大于可用余额 显示错误提示
				isSubmit: false, // 提现点击
				money: '', // 用户输入的提现金额
				submitStatus: false,


				type_list: [{
					id: 1,
					name: '银行卡',
					type: 1
				}, ],
				type_index: 0,

			}
		},
		onLoad() {
			this.userBankCard()
			this.userInfo()
		},
		onShow() {
			// #ifdef MP-ALIPAY || MP-TOUTIAO
			let user_card_info = this.$db.get('user_card_info', true);
			if (user_card_info) {
				this.cardInfo = user_card_info;
				this.$db.del('user_card_info', true);
			}
			// #endif
		},
		computed: {
			userbankCard() {
				if (Object.keys(this.cardInfo).length) {
					return true
				} else {
					return false
				}
			},
			// 店铺提现手续费
			tocashMoneyRate() {
				return this.$store.state.config.tocash_money_rate
			},
			// 店铺提现最低金额
			tocashMoneyLow() {
				return this.$store.state.config.tocash_money_low
			},
			// 提现文字说明
			tocashExplain() {
				if (this.tocashMoneyRate && this.tocashMoneyLow) {
					return '最低提现金额 ' + this.tocashMoneyLow + ' 元（收取 ' + this.tocashMoneyRate + ' %服务费）'
				} else if (this.tocashMoneyLow) {
					return '最低提现金额 ' + this.tocashMoneyLow + ' 元'
				} else if (this.tocashMoneyRate) {
					return '收取 ' + this.tocashMoneyRate + ' %服务费'
				} else {
					return ''
				}
			}
		},
		methods: {
			type_change(e) {
				let id = e.detail.value;
				this.type_index = id;
			},
			all_num: function() {
				this.money = this.user.balance
			},

			// 获取我的默认银行卡信息
			userBankCard() {
				this.$api.getDefaultBankCard({}, res => {
					if (res.status) {
						this.cardInfo = res.data
					}
				})
			},
			// 获取用户信息
			userInfo() {
				// 获取我的余额信息
				// 获取用户的可用余额
				this.$api.userInfo({}, res => {
					this.user = res.data
				})
			},
			// 去提现
			toCash() {
				if (!this.money) {
					this.$common.errorToShow('请输入要提现的金额')
					return false
				} else if (Number(this.money) === 0) {
					this.$common.errorToShow('提现金额不能为0')
				} else if (this.type_index == -1) {
					this.$common.errorToShow('选择提现方式')
				} else {
					this.submitStatus = true;
					this.$api.userToCash({
						money: this.money,
						cardId: this.cardInfo.id,
						type: this.type_list[this.type_index].type

					}, res => {
						if (res.status) {
							this.$common.successToShow(res.msg, () => {
								// this.submitStatus = false;
								uni.navigateBack({
									delta: 1
								});
							})
						} else {
							if (res.data == 11016) {
								uni.navigateTo({
									url: '/pages/user/settings/bank/bank'
								})
							}
							if (res.data == 110161) {
								uni.navigateTo({
									url: '/pages/user/settings/wechat/wechat?type=4'
								})
							}
							this.$common.errorToShow(res.msg);
							// this.submitStatus = false;
						}
					}, res => {
						this.submitStatus = false;
					})
				}
			},
			// 跳转我的银行卡列表
			toBankCardList() {
				this.$common.navigateTo('./bankcard?mold=select')
			}
		},
		watch: {
			money() {
				// 比较用户的输入金额 如果大于可用金额
				if (this.money === '' || Number(this.money) <= 0) {
					this.isSubmit = false
				} else if (Number(this.money) > Number(this.user.balance)) {
					this.isError = true
					this.isSubmit = false
				} else if (Number(this.money) < Number(this.tocashMoneyLow)) {
					this.isError = false
					this.isSubmit = false
				} else {
					this.isError = false
					this.isSubmit = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.submit_btn2 {
		border: 1rpx solid #d9d9d9;
		color: #999;
	}

	.content-top {
		position: relative;
		width: 100%;
		padding: 0 30rpx;
	}

	.top {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 50rpx;

	}

	.top_left {
		font-size: 28rpx;
		color: #fff;
	}

	.top_right {
		display: flex;
		align-items: center;
	}

	.wx_img {
		width: 46rpx;
		height: 46rpx;
		margin-right: 10rpx;
	}

	.right_title {
		font-size: 28rpx;
		color: #fff;
	}

	/* ................................. */

	.note {
		display: flex;
		font-size: 24rpx;
		color: #93B6D6;
		margin-top: 30rpx;
		margin-left: 48rpx;
	}

	.note_symbol {
		color: #EC5D29;
		margin-right: 10rpx;
	}

	.btn_btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 131rpx;
		width: 580rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #999999;
		color: #fff;
		margin-left: 85rpx;
	}

	.red_btn {
		background-color: #F24C22;
	}

	/* ............................. */

	.box {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 0 20rpx;
		background: #103251;
		border-radius: 20rpx;
	}

	.box_title {
		padding: 30rpx 0;
		padding-left: 10rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.box_input {
		display: flex;
		align-items: center;
	}

	.box_symbol {
		font-size: 40rpx;
		color: #fff;
		font-weight: bold;
	}

	.box_symbol2 {
		font-size: 56rpx;
		padding-left: 20rpx;
		color: #fff;
	}

	.box_footer {
		display: flex;
		align-items: center;
		padding-left: 10rpx;
		font-size: 24rpx;
		color: #999;
		height: 93rpx;
		border-top: 1rpx solid #23547C;
		margin-top: 10rpx;
	}

	.box_red {
		color: #3577f1;
	}

	/* ....................................... */

	.user-head {
		height: 100upx;
	}

	.user-head-img {
		height: 90upx;
		width: 90upx;
		border-radius: 50%;
	}

	.cell-hd-title {
		color: #333;
	}

	.cell-item {
		border: none;
	}

	.cell-item-bd {
		color: #666;
		font-size: 26upx;
	}

	.button-bottom .btn {
		width: 100%;
	}

	.yl-logo {
		width: 188upx;
		height: 54upx;
		float: left;
	}

	.withdrawcash-input {
		display: flex;
		align-items: center;
		font-size: 50upx;
		border-bottom: 2upx solid #e8e8e8;
		padding-bottom: 20upx;
		width: 95%;
		max-width: 95%;
	}

	.withdrawcash-input text {
		font-size: 40upx;
	}

	.withdrawcash-input input {
		display: inline-block;
		min-width: 500upx;
		padding-left: 20upx;
	}
</style>
